<template>
  <div>
    <ElCard
      style="width: 500px"
      :body-style="{ width: '500px', height: '330px' }"
    >
      <ElTag :type="cardReaderStatus.status === 0 ? 'success' : 'danger'">
        <template #default>
          读卡器状态:{{
            cardReaderStatus.status === 0 ? "请刷卡" : cardReaderStatus.message
          }}</template
        >
      </ElTag>
      <!-- <ElButton
        v-show="showMockLogin"
        type="success"
        size="small"
        @click="mockLogin"
        >模拟刷卡</ElButton
      > -->
      <div class="id-card-box" v-show="wsData?.resultContent?.certNumber">
        <div class="area-base">
          <div class="row">
            <div class="label">姓名</div>
            <div class="desc">{{ wsData?.resultContent?.partyName }}</div>
          </div>
          <div class="row">
            <div class="label">性别</div>
            <div class="desc">{{ gender }}</div>
            <span class="label">民族</span>
            <span class="desc">{{ wsData?.resultContent?.nation }}</span>
          </div>
          <div class="row">
            <div class="label">出生</div>
            <div class="desc">{{ wsData?.resultContent?.bornDay }}</div>
          </div>
          <div class="row">
            <div class="label">住址</div>
            <div class="desc" style="width: 220px">
              {{ wsData?.resultContent?.certAddress }}
            </div>
          </div>
        </div>
        <div class="area-image" style="width: 128px">
          <ElImage
            style="width: 100px; height: 126px"
            :src="'data:image/PNG;base64,' + wsData?.resultContent?.identityPic"
          />
        </div>
        <div class="area-number">
          <div class="num-label">公民身份证号</div>
          <div style="width: 298px">
            {{ wsData?.resultContent?.certNumber }}
          </div>
        </div>
      </div>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, toRaw, watch, computed } from "vue";
import { ICardReaderContent } from "@/model/ICardReader";
import { useWs } from "@/utils/SingleWS";
defineOptions({
  name: "CardReader",
});
const wsData = ref();
const { cardReaderStatus } = useWs((data) => {
  wsData.value = data;
});
watch(
  cardReaderStatus,
  (val) => {
    console.log(val);
  },
  {
    immediate: true,
  }
);

const showMockLogin = ref(true);
// if (import.meta.env.DEV) {
//   showMockLogin.value = true
// }
const mockLogin = () => {
  const readerData: ICardReaderContent = {
    bornDay: "",
    certAddress: "",
    certNumber: "412702198901087450",
    certOrg: "",
    certType: 0,
    effDate: "",
    expDate: "",
    gender: 1,
    identityBackPic: "",
    identityFrontPic: "",
    identityPic: "",
    identityPrintPic: "",
    nation: "",
    partyName: "张猛",
  };
  wsData.value = {
    resultContent: readerData,
  };
};

const gender = computed(() => {
  console.log(wsData.value?.resultContent?.gender);
  return wsData.value?.resultContent?.gender === 1
    ? "男"
    : wsData.value?.resultContent?.gender === 0
    ? "女"
    : "";
});
onBeforeUnmount(() => {
  wsData.value = {};
});
const save = () => {
  if (wsData?.value?.resultContent?.certNumber) {
    const data = JSON.parse(JSON.stringify(toRaw(wsData.value.resultContent)));
    wsData.value.resultContent.certNumber = "";
    return data;
  } else {
    return false;
  }
};
defineExpose({ save });
</script>

<style scoped lang="scss">
.id-card-box {
  display: flex;
  flex-wrap: wrap;
  width: 428px;
  height: 270px;

  .area-base {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 300px;
  }

  .area-image {
    display: flex;
    width: 128px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    height: 180px;
  }

  .area-number {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;

    .num-label {
      padding-left: 20px;
      width: 130px;
    }
  }

  .row {
    display: flex;
    flex-wrap: nowrap;
    line-height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;

    .label {
      width: 80px;
      padding-left: 20px;
    }
  }
}
</style>
